import React, {Component} from 'react'
import {View, Text, ScrollView, TouchableOpacity} from 'react-native'
import {GetGradeTextBooksApi} from '../../config/api'
import styles from '../../config/styles'

class BookSelector extends Component {
    state = {
        books: []
    }

    componentDidMount () {
        const {grade_id} = this.props.navigation.state.params
        GetGradeTextBooksApi(grade_id).then((data) => {
            this.setState({books: data.textbooks})
        })
    }

    complete = (book) => {
        const {onComplete} = this.props.navigation.state.params
        onComplete(book)
        this.props.navigation.goBack()
    }

    render () {
        return(
            <ScrollView>
                {this.state.books.map((book, index) => {
                    return(
                        <TouchableOpacity 
                            key={index} 
                            style={styles.selector_container}
                            onPress={() => this.complete(book)}
                        >
                            <Text>{book.name}</Text>
                        </TouchableOpacity>
                    )
                })}
            </ScrollView>
        )
    }
}

export default BookSelector